<template>
  <div>
    <div style="margin-top:1rem;margin-bottom:1rem"> 
      <!-- <div class="headimg">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506681926404&di=b3dd8f6b0ea08af186d8a49054d8833a&imgtype=0&src=http%3A%2F%2Fs7.sinaimg.cn%2Fmw690%2F006q2Meozy72G8dV1Vc66%26690" alt="">
      </div> -->
      <yd-slider  autoplay="3000">
        <yd-slider-item>
          <img src="https://jysh.oss-cn-qingdao.aliyuncs.com/Eric/1122.jpeg">
        </yd-slider-item>
        <yd-slider-item>
          <img src="https://jysh.oss-cn-qingdao.aliyuncs.com/Eric/1123.jpeg">
        </yd-slider-item>
      </yd-slider>
      <yd-tab v-model="tab2" :callback="fn" :prevent-default="false" :item-click="itemClick">
        <yd-tab-panel v-for="item in items" :label="item.label"></yd-tab-panel>
      </yd-tab>
     
      <swiper :options="swiperOption" style="margin-top:20px">
        <swiper-slide style="backgroundColor: #fff;"  v-for="subl in list" :key="subl.index">
          <div class="imgjxx">
            <div style="height:3.5rem;">
              <router-link :to="{path:'redinfo',query: {id:subl.id,name:subl.name}}">
                <img :src="subl.img" alt="" srcset="" class="hd-img-responsive">
              </router-link>
            </div>
              <div class="imgxl">
                <span class="imgxlt" >{{subl.name}}</span>
              </div>
          </div>
        </swiper-slide>
      </swiper>

      <div class="fengexian"></div>
      <p style="margin-bottom:15px;margin-top:15px">
        <span style="text-align:left;margin-left:4%;font-size:20px">精品线路</span>
        <router-link :to="{path:'boutiquelineindex'}">
          <span style="float:right;margin-right:4%;font-size:14px">更多>></span>
        </router-link>
      </p>
      <div v-for="item in lineList" :key="item.index">
        <router-link :to="{path:'boutiquelinedetail',query: {id:item.id}}">
        <div class="line-style">
          <div>
            <img :src="item.image" alt="" srcset="" class="tj-img">
          </div>
          <div style="height:2rem">
            <div class="xbtdiv"><span>{{item.title}}</span></div>
            <!-- <div class="adddiv"><span>距您位置: {{item.distance}}KM</span></div> -->
            <div class="xfdiv"><span>预定价格: {{item.online_price}}元</span></div>
            <div class="adddiv">平均评分: <span>{{item.score}}</span></div>
          </div>
          <!-- <div class="cgjsdiv" >{{item.content}}</div> -->
        </div>
        </router-link>
      </div>
      
      <div class="fengexian"></div>
      <p style="margin-bottom:15px;margin-top:15px">
        <span style="text-align:left;margin-left:4%;font-size:20px">热门游记</span>
        <router-link :to="{path:'travelnoteslist'}">
          <span style="float:right;margin-right:4%;font-size:14px">更多>></span>
        </router-link>
      </p>
      <div v-for="item in notesList" :key="item.index">
        <router-link :to="{path:'travelnotesinfo',query: {id:item.id}}">
        <div class="line-style">
          <div>
            <img :src="item.image" alt="" srcset="" class="tj-img">
          </div>
          <div style="height:2rem">
            <div class="xbtdiv"><span>{{item.title}}</span></div>
            <!-- <div class="adddiv"><span>距您位置: {{item.distance}}KM</span></div> -->
            <!-- <div class="xfdiv"><span>预定价格: {{item.money}}元</span></div> -->
            <div class="xfdiv"><span>关键词: {{item.label}}</span></div>
            <div class="adddiv">平均评分: <span>{{item.score}}</span></div>
          </div>
          <!-- <div class="cgjsdiv" >{{item.label}}</div> -->
        </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'appIndex',
  data () {
    return {
      tab2: 0,
      maintab: true,
      search: '',
      titles: '123',
      // swiper 参数设置 详见
      swiperOption: {
        pagination: '.swiper-pagination',
        slidesPerView: 'auto',
       // centeredSlides: true,
        paginationClickable: true,
        spaceBetween: 10,
        loop: false
      },
      outdata: {},
      value1: '',
      pageNo: 1,
      pageSize: 2,
      list: [],
      lineList: [],
      notesList: [],
      items: [
        {label: '攻略'},
        {label: '食'},
        {label: '住'},
        {label: '行'},
        {label: '游'},
        {label: '购'}
      ]
    }
  },
  mounted: function() {
    this.load();
    this.loadLine();
    this.loadNotes();
  },
  methods: {
    loadNotes() {
      this.hdAjax({
        url: this.API.findTravelsList,
        data: {
          pageNo: this.pageNo,
          pageSize: this.pageSize
        },
        success: (resultData) => {
          console.log(resultData);
          console.log('youji')
          if (resultData.data && resultData.errcode === 0) {
            console.log(resultData);
            this.notesList = resultData.data.results;
          } else {
            this.dialog.toast({mes: resultData.errmsg})
          }
        }
      });
      // this.hdAjax({
      //   url: this.API.travelnotesimages,
      //   success: (resultData) => {
      //     this.imagesdata = resultData.data.slice(0, 5);
      //   }
      // })
    },
    loadLine () {
      this.hdAjax({
        url: this.API.findLineList,
        data: {
          pageNo: this.pageNo,
          pageSize: this.pageSize
        },
        success: (resultData) => {
          console.log(resultData);
          console.log('line返回值')
          if (resultData.data && resultData.errcode === 0) {
            this.lineList = resultData.data.results;
            this.lineList.forEach(element => {
              if (element.content) {
                element.content = element.content.replace(/(\n)/g, '');
                element.content = element.content.replace(/(\t)/g, '');
                element.content = element.content.replace(/(\r)/g, '');
                element.content = element.content.replace(/<\/?[^>]*>/g, '');
                element.content = element.content.replace(/\s*/g, '');
                element.content = element.content.replace(/&nbsp;/ig, '');
              }
            });
          } else {
            this.dialog.toast({mes: resultData.errmsg})
          }
        }
      });
    },
    load () {
      this.hdAjax({
        url: this.API.findFivePlaceList,
        success: (resultData) => {
          if (resultData.data && resultData.errcode === 0) {
            console.log(resultData);
            this.list = resultData.data;
          } else {
            this.dialog.toast({mes: resultData.errmsg})
          }
        }
      })
    },
    fn(label, key) {
      console.log(label, key);
      if (label === '食') {
        this.$router.push({path: 'redList'});
      };
      if (label === '住') {
        this.$router.push({path: 'liveIndex'});
      };
      if (label === '行') {
        this.$router.push({path: 'trafficIndex'});
      };
      if (label === '游') {
        this.$router.push({path: 'blueIndex'});
      };
      if (label === '购') {
        this.$router.push({path: 'buylist'});
      };
    },
    itemClick(label, key) {
      console.log(label, key);
      if (label === '食') {
        this.$router.push({path: 'redList'});
      };
      if (label === '住') {
        this.$router.push({path: 'liveIndex'});
      };
      if (label === '行') {
        this.$router.push({path: 'trafficIndex'});
      };
      if (label === '游') {
        this.$router.push({path: 'blueIndex'});
      };
      if (label === '购') {
        this.$router.push({path: 'buylist'});
      };
    }
  }
}
</script>

<style scope>
body{
  font-family: '微软雅黑'
}
subtitle{
  margin-left: 2%;
  font-size: 20px;
  font-weight: bold
}
header{
  background-color: #393A3F;
}
.swidiv{
  float: left;
}
.mapbut .icon-ucenter-outline:before {
  content: "\E616";
  color: #000;
}
.skljx{
  width: 100%;
  height: 80px;
  padding: 5px 10px;
}
.skljxt{
  font-size: 14px;
}
.skljgl{
  position: relative;
  border-radius: 15px;
  top: -120px;
  left: 10px;
  width: 30px;
  height: 25px;
}
.skljxt2{
  font-size: 12px;
}
.skljxr{
  float: right;
  font-size: 12px;
}
.zn{
  position: relative;
  border-radius: 15px;
  top: -38px;
  margin-left: 3%;
  width: 30px;
  height: 25px;
}
.ddxgzn{
  position: relative;
  border-radius: 15px;
  top: -40px;
  left: 10px;
  width: 30px;
  height: 25px;
}
.ddxg img{
  width: 100%;
  height: 300px;
}
.sklj img{
  width: 100%;
  height: 300px;
}
.icon-ucenter-outline:before {
    content: "\E616";
    color: #fff;
}
.back-icon:before {
    content: "\E607";
    color: #fff;
}
element.style {
    color: #fff;
}
.navbar-item>a {
  color: #fff;
}
.headimg {
  width: 100%;
  height: 250px;
}
.headimg img{
  width: 100%;
  height: 250px;
}
.condiv{
  padding: 10px 10px;
}
.condiv button{
  font-size: 14px;
  width: 40%;
  height: 45px;
}
.imgsli{
  min-width: 100%;
  height: 300px;
}
.imgsli li{
  float: left;
  width: 70%;
  height: 300px;
  border: 2px solid #000;
}
.zdytop{
  margin-top: 10px;
  width: 100%;
  height: 50px;
  padding: 10px;
}
.zdyleft{
  float: left;
  width: 50%;
  height: 50px;
  margin-left: 0px;
  float: left;
  text-align: left;
}
.zdyleft-top{
  font-size: 18px;
}
.zdyleft-button{
  color: #D0D0D0;
}
.zdyright{
  float: right;
  font-size: 12px;
  width: 50%;
  height: 30px;
  margin-right: 0px;
  text-align: right;
  line-height: 30px;
}
.tj-img{
  height: 2rem;
  width: 42%;
  float: left;
}
.xbtdiv{
  padding-top:10px;
  margin-left: 50%;
  font-size: 0.3rem;
  margin-top:30px;
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  white-space: nowrap;
}
.adddiv{
  margin-left: 50%;
  font-size: 0.25rem;
  margin-top:10px;
  
}
.xfdiv{
  margin-left: 50%;
  font-size: 0.25rem;
  margin-top: 15px;
}
.cgjsdiv{
  font-size: 0.3rem;
  margin: 30px 20px 20px 10px;
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  white-space: nowrap;
  -webkit-line-clamp:2;
}
.fengexian{
  margin-left: 2%;
  width: 96%;
  border-bottom: 1px solid #999999;
  margin-top: 15px;
}
.swiper-container {
  width: 100%;
  /* margin: 10px auto;  */
}
.swiper-slide {
  float: left;
  text-align: left;
  font-size: 18px;
  /* background: #fff; */
  width: 80%;

  /* Center slide text vertically */
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.imgjxx{
  position:relative;
  float: left;
  width: 300px;
  margin-left: 10px;
}
.imgxl{
  float: left;
  margin-top: 3px;
  width: 50%;
  height: 40px;
}
.imgxlt{
  font-size: 14px;
}
.imgxlb{
  font-size: 12px;
}
.line-style{
  /* border-bottom: 1px solid #999999; */
  margin-left: 4%;
  width: 92%;
}
.imgxr{
  float: right;
  text-align: left;
  font-size: 12px;
  width: 50%;
  height: 27px;
  margin-top: 7px;
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}
.hd-img-responsive{
  height: 3.5rem;
  width: 100%;
}
</style>
